<template>
	<view class="center">
		<view class="center-top">
			<view class="center-top-item" @click="goDesign">
				<image src="https://master.shengejiaju.cn/web/static/new-shop/pic1.png" mode="aspectFit"></image>
				<view class="label">在线搭配</view>
			</view>
			<view class="center-top-item" @click="goAbout">
				<image src="https://master.shengejiaju.cn/web/static/new-shop/pic2.png" mode="aspectFit"></image>
				<view class="label">关于深哥家居</view>
			</view>
			<view class="center-top-item" @click="goNews">
				<image src="https://master.shengejiaju.cn/web/static/new-shop/pic3.png" mode="aspectFit"></image>
				<view class="label">品牌资讯</view>
			</view>
		</view>
		<!-- <view class="center-video">
			<view class="center-video-tit">品牌视频</view>
			<view class="center-video-items">
				<view class="center-video-item" v-for="(data,index) in list" :key="index" @click="goVideoInfo(data)">
					<view class="poster">
						<image :src="data.image" mode="aspectFill"></image>
						<view class="icon"><u-icon size="24" color="#FFF" name="play-right-fill"></u-icon></view>
					</view>
					<view class="name">{{ data.name }}</view>
				</view>
			</view>
			<pt-nothing bgColor="transparent" v-if="!list.length && noMore"></pt-nothing>
			<pt-loading-more bgColor="transparent" v-if="loadingMore"></pt-loading-more>
			<pt-nomore bgColor="transparent" v-if="noMore && list.length"></pt-nomore>
		</view> -->
		<view class="center-video">
			<view class="center-video-tit">品牌信息</view>
			<view class="about-content">
				<u-parse :html="content"></u-parse>
			</view>
		</view>
		<u-tabbar :list="tabbarList" :icon-size="52" :height="100" active-color="#f59359"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarList: [],
				page: 0,
				noMore: false,
				loadingMore: false,
				list: [],
				content: ''
			}
		},
		onReachBottom() {
			// if(!this.loadingMore && !this.noMore){
			// 	this.page++
			// 	this.getVideo()
			// }
		},
		onLoad() {
			this.tabbarList = getApp().globalData.merchantMenu
			// this.getVideo()
			this.init()
		},
		methods: {
			async init(){
				let res = await this.$u.api.StoreAbout()
				this.content = res.datas.brief
			},
			// async getVideo(){
			// 	let res = await this.$u.api.VideoList({page: this.page})
			// 	this.list = this.page==0?res.datas.data:this.list.concat(res.datas.data)
			// 	this.loadingMore = false
			// 	this.noMore = this.list.length >= res.datas.count
			// },
			goDesign(){
				uni.navigateTo({
					url: '/pages/tie-in-list/tie-in-list'
				})
			},
			goAbout(){
				uni.navigateTo({
					url: '/pages/about/about'
				})
			},
			goNews(){
				uni.navigateTo({
					url: '/merchant/news-list/news-list'
				})
			},
			goVideoInfo(data){
				uni.navigateTo({
					url: `/merchant/video-info/video-info?video_id=${data.video_id}`
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.center{
		.center-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			.center-top-item{
				text-align: center;
				image{
					width: 214rpx;
					height: 166rpx;
				}
				.label{
					line-height: 42rpx;
					margin-top: 24rpx;
				}
			}
		}
		.center-video{
			padding: 30rpx 30rpx 0;
			&-tit{
				font-size: 36rpx;
				font-weight: bold;
			}
			.about-content{
				margin-top: 30rpx;
			}
			&-items{
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 30rpx;
				.center-video-item{
					margin-right: 30rpx;
					margin-top: 30rpx;
					&:nth-child(2n){
						margin-right: 0;
					}
					.poster{
						width: 330rpx;
						position: relative;
						&::before{
							position: absolute;
							content: '';
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
							top: 0;
							left: 0;
							background-color: rgba(0,0,0,.1);
							z-index: 1;
						}
						.icon{
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							border: solid 4rpx #FFF;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 5;
						}
						image{
							width: 330rpx;
							height: 250rpx;
							border-radius: 10rpx;
						}
					}
					.name{
						line-height: 42rpx;
						margin-top: 28rpx;
					}
				}
			}
		}
	}
</style>
